<!-- 农家乐新增 编辑 -->
<template>
    <el-dialog v-model="dialogFormVisible" :title="agritainmentForm.id ? '修改农家乐内容' : '新增农家乐'" width="55%">
        <el-form :model="agritainmentForm" :rules="rules" ref="agritainmentForms">
            <el-form-item prop="img" label="农家乐图片" :label-width="formLabelWidth">
                <!-- 上传图片 -->
                <!-- http://134.175.252.64:8080/file/upload -->
                <!-- /api/file/upload -->
                <el-upload class="avatar-uploader" action="/api/file/upload" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="agritainmentForm.img" :src="agritainmentForm.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <!-- <Plus /> -->
                        <UploadFilled />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item prop="title" label="农家乐标题" :label-width="formLabelWidth">
                <el-input v-model="agritainmentForm.title" autocomplete="off" placeholder="请输入农家乐标题" />
            </el-form-item>
            <el-form-item prop="content" label="农家乐内容" :label-width="formLabelWidth">
                <MyEditor :content="agritainmentForm.content"></MyEditor>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import MyEditor from '../../../components/editor/index.vue'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue';
import $bus from '../../../bus'
import { Agritainment } from '../../../api/info/agritainment/type';
import type { UploadProps } from 'element-plus'
let $emit = defineEmits(['operateAgritainmentInfo'])
defineProps(['paginationData'])
let agritainmentForms = ref()
let formLabelWidth = ref<String>('100px')
let dialogFormVisible = ref<Boolean>(false)
// 收集对话框中的数据
let agritainmentForm = reactive<Agritainment>({
    img: '',
    title: '',
    content: ''
})

onMounted(() => {
    $bus.on('showDialog', (obj: any) => {
        //  清空上一次文本框中的内容
        agritainmentForm.img = ''
        agritainmentForm.title = ''
        agritainmentForm.content = ''
        agritainmentForm.id = ''

        // 显示对话框
        dialogFormVisible.value = obj.isShow

        // 赋值
        if (obj.row) {
            Object.assign(agritainmentForm, obj.row)
        }
        // 清空校验结果
        agritainmentForms.value?.clearValidate('img')
        agritainmentForms.value?.clearValidate('title')
        agritainmentForms.value?.clearValidate('content')

    })
    $bus.on('blur', (html: any) => {
        agritainmentForm.content = html
    })
})

// 表单校验
const rules = {
    img: [{ required: true, message: '农家乐图片不能为空', trigger: 'change' }],
    title: [{ required: true, message: '农家乐标题不能为空', trigger: 'blur' }],
    content: [{ required: true, message: '农家乐内容不能为空', trigger: 'blur' }]
}

// 对话框确认按钮回调
const submit = async () => {
    await agritainmentForms.value.validate();
    // 表单校验通过
    $emit('operateAgritainmentInfo', agritainmentForm)
    // 关闭对话框
    dialogFormVisible.value = false
}
// 图片上传成功回调
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    agritainmentForm.img = response.data.url
    agritainmentForms.value.clearValidate('img')
}
// 图片上传之前触发的钩子 可以限制上传的格式 大小 文件类型
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif ') {
        if (rawFile.size / 1024 / 1024 < 2) {
            return true
        } else {
            ElMessage.error('上传图片的大小不能超过 2MB!')
            return false
        }

    } else {
        ElMessage.error('上传文件的格式必须是 jpeg / png / gif')
        return false
    }
}
</script>

<style lang="scss" scoped>
.el-form {
    padding: 20px 30px;
}

.avatar-uploader .avatar {
    width: 130px;
    height: 80px;
    display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 60px;
    text-align: center;
}
</style>